<template>
    <form method="post" enctype="multipart/form-data" @submit.prevent="handleSubmit()">

        <Loading ref="loading"></Loading>

        <Toast ref="toast"></Toast>

        <div class="space-sm">
            <div v-for="index in Math.ceil(inputItems.length/commonData.columns)" class="row">
                <div v-for="index1 in commonData.columns" :class="cellClass" v-if="getIsEnd((index - 1) * commonData.columns + index1)">
                    <component
                            :is="getAttr(index, index1).component"
                            :inputItem="getAttr(index, index1)"
                    ></component>
                    <!--                <div class="control">-->
                    <!--                    <div v-html="getAttribute((index - 1) * commonData.columns + index1)"></div>-->
                    <!--                </div>-->
                </div>
            </div>
        </div>

        <div class="control from-operation">
            <a v-show="hasBack" href="javascript:history.go(-1)" class="btn grass rounded"><i class="icon icon-arrow-left"></i>{{this.$t('back')}}</a>
            <button class="btn grass rounded" type="submit">{{$t('submit')}}</button>
            <div class="clearfix"></div>
        </div>

    </form>
</template>

<script>
    import Input from "./Input";
    import Select from "./Select";
    import Textarea from "./Textarea";
    import CheckBox from "./CheckBox";
    import Loading from "@/components/Loading";
    import Toast from "@/components/Toast";
    import request from "@/libs/request";

    export default {
        name: 'BaseInfoFormTab',
        props: {
            commonData: {
                columns: [String, Number],
                primaryKeys: {},
                baseInfoAction: '',
            },
            hasBack: true
        },
        components: {Input, Select, Textarea, CheckBox, Toast, Loading},
        data() {
            return {
                cellClass: '',
                modelForm: '',
                inputItems: []
            }
        },
        methods: {
            handleSubmit() {
                let data = {};
                this.inputItems.forEach(function (item) {
                    data[item.name] = item.value;
                });
                this.$refs.loading.start();
                let that = this;
                this.inputItems.forEach(function (item) {
                    item['errors'] = ''
                });
                request({
                    url: that.commonData.baseInfoAction,
                    method: 'post',
                    data: {[that.modelForm]: data},
                    params: that.commonData.primaryKeys,
                }).then(response => {
                    that.$refs.loading.stop();
                    that.$refs.toast.show(response.meta.msg);
                    if (response.meta.code === '000') {
                        that.$emit('afterSave', response);
                    } else if (response.meta.code === '001') {
                        Object.keys(response.data).forEach(function (key) {
                            that.inputItems.forEach(function (item) {
                                if (item['name'] === key) {
                                    item['errors'] = response.data[key][0];
                                }
                            })
                        });
                    }
                }).catch(error => {
                    that.$refs.loading.stop();
                });
            },
            getAttr(index, index1) {
                return this.inputItems[((index - 1) * this.commonData.columns + index1) - 1];
            },
            getIsEnd(index) {
                return index <= this.inputItems.length
            },
            getInputItems() {
                this.$refs.loading.start();
                let that = this;
                request({
                    url: that.commonData.baseInfoAction,
                    method: 'get',
                    params: that.commonData.primaryKeys,
                }).then(response => {
                    that.$refs.loading.stop();
                    that.inputItems = response.data.inputItems;
                    that.modelForm = response.data.modelForm;
                    that.$emit('afterFind', response);
                }).catch(error => {
                    that.$refs.loading.stop();
                })
            },
        },
        mounted() {
            this.cellClass = 'cell-' + 12 / this.commonData.columns;
            this.getInputItems();
        },
    }
</script>
<style scoped>
    .row [class^=cell-] > .control {
        margin-right: .5rem;
    }

    .row [class^=cell-]:last-child > .control {
        margin-right: 0;
    }
</style>